<template>
  <vue-chart
    id="chart"
    ref="chart"
    class="chart"
    autoresize
    :option="propValue.option"
  />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import {
  ScatterChart, BarChart, LineChart, PieChart,
} from 'echarts/charts';
import {
  TitleComponent, TooltipComponent, LegendComponent, GridComponent,
} from 'echarts/components';
import VueChart from 'vue-echarts';
import OnEvent from '../common/OnEvent';

use([
  CanvasRenderer,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart,
  LineChart,
  PieChart,
]);

export default {
  components: {
    VueChart,
  },
  extends: OnEvent,
  props: {
    propValue: {
      type: Object,
      require: true,
      default: () => { },
    },
    element: {
      type: Object,
      default: () => { },
    },
  },
};
</script>

<style scoped>
.chart {
  /* height: 400px; */
}
</style>
